<!--
 * @Author: QUAN
 * @Date: 2021-08-23 16:04:02
 * @LastEditTime: 2021-11-29 09:36:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5-activity\src\views\BlindBox\index.vue
-->
<template>
  <div class="blind-box">
    <bottom-open-app-adv v-if="!$UA.isJM" :ymParmas="ymParmas"></bottom-open-app-adv>
    <van-nav-bar
      title="积幕盲盒"
      left-arrow
      v-if="$UA.isJM"
      @click-left="toApp"
      @click-right="share"
      class="my-nav-bar"
    >
      <template #right>
        <img src="../../assets/images/activity/share.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 顶部 -->
    <div class="header" :class="{ app: !$UA.isJM }">
      <!-- 用户信息 -->
      <div class="info">
        <div class="info-left">
          <div class="info-item-left" @click="toLogin">
            <img :src="$userInfo.avatar ? $userInfo.avatar : defaultAvator" alt="" />
          </div>
          <div class="info-item-right" :class="{ notLogin: !$userInfo.nickname }">
            <p v-if="$userInfo.nickname">{{ $userInfo.nickname }}</p>
            <p>
              <span class="my-point" v-if="$userInfo.nickname">
                {{ jimuintegrate.point ? jimuintegrate.point : '0' }}
              </span>
              <span class="my-button" v-if="$userInfo.nickname" @click="toGetJM">赚积木</span>
              <span class="my-button" v-else @click="login">登录开盲盒</span>
            </p>
          </div>
        </div>
        <div class="info-right" @click="myBox">
          <span>我的盲盒</span>
        </div>
      </div>
      <!-- 这里是盲盒盒子 -->
      <div class="box">
        <div
          v-app-jump="{
            to: goDownloadJM,
            params: {ymscheme: ymParmas},
          }"
          v-show="false"
          id="box-youmeng"
          youmeng="youmeng"
          class="go-download-jm"
        ></div>
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, index) in 30" :key="index">
            <img src="@/assets/images/activity/big-blind-box.png" alt="" @click="openBox" />
          </swiper-slide>
        </swiper>
        <span class="shou"></span>
      </div>
      <!-- 领取邀请奖励 -->
      <div class="get-invite-prize an-share-right" @click="shareFriend" v-if="(!taskData.invite&&$userInfo.nickname) || (taskData.invite < 1 &&$userInfo.nickname)">
        <p>邀请好友开盲盒</p>
        <p>「每邀请一位好友获得1次开盲盒机会」</p>
      </div>
      <div class="get-invite-prize finished" v-if="(taskData.invite > 1 &&$userInfo.nickname)" @click="getGrade('invite', $event)">点击领取邀请奖励</div>
      <!-- 这里是开盲盒机会 -->
      <div class="open-box-num" v-if="$userInfo.nickname">
        <p>
          {{ jimuintegrate.residueCount ? jimuintegrate.residueCount : 0 }}
          <span>次</span>
        </p>
        <p>可开盲盒机会</p>
      </div>
      <!-- 消息 -->
      <div class="message" :class="{ isLogin: !$userInfo.nickname }">
        <div class="inner-message">
          <div class="message-1">
            <div v-for="(item, index) in fir_topPrizeList" :key="index" class="message-content">
              <img v-if="item.avatar" :src="item.avatar" alt="" />
              <span v-if="fir_topPrizeList.length > 0">{{ item.nickname }}</span>
              <span v-if="fir_topPrizeList.length > 0">刚刚开出了{{ item.title }}</span>
            </div>
          </div>
          <div class="message-2">
            <div
              v-for="(item1, index1) in sub_topPrizeList"
              :key="index1 + 'gg'"
              class="message-content"
            >
              <img v-if="item1.avatar" :src="item1.avatar" alt="" />
              <span v-if="sub_topPrizeList.length > 0">{{ item1.nickname }}</span>
              <span v-if="sub_topPrizeList.length > 0">刚刚开出了{{ item1.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体 -->

    <!-- 奖池 -->
    <PrizePool></PrizePool>

    <!-- 我要开盲盒 -->
    <GetIntegral @refreshGrade="refreshGrade" :isRefresh="isRefresh"></GetIntegral>

    <!-- dialog -->
    <van-dialog v-model="dialogVisible" title="" :showConfirmButton="false" className="dialog-bg">
      <div class="dialog-content">
        <p class="title">{{ dialogTitle }}</p>
        <p class="subTitle" v-if="dialogSubTitle">{{ dialogSubTitle }}</p>
        <div class="content">
          <!-- 里面的展示分不同的情况 -->
          <!-- 这里是开盲盒和第一次进入加积分 -->
          <div
            class="jj-grade"
            v-if="dialogTitle === '10积木开启盲盒' || dialogTitle === '每日签到成功'"
          >
            <img
              v-if="dialogTitle === '10积木开启盲盒' || dialogTitle === '每日签到成功'"
              src="../../assets/images/activity/jimu.png"
              alt=""
            />
            <span>{{ dialogTitle === '10积木开启盲盒' ? ' -10' : ' +10' }}</span>
          </div>
          <!-- 这里是中奖 -->
          <div class="zj" v-else>
            <img :src="dialogContent" alt="" />
            <div class="prize-info">
              <p>{{ rewordsData.title ? rewordsData.title : '空盒子' }}</p>
              <p class="price">{{ rewordsData.priceLabel }}</p>
            </div>
          </div>
        </div>
        <!-- 展示的工具按钮啥的 -->
        <div class="dialog-tool">
          <Button type="primary" size="small" v-if="dialogButton === '开盲盒'" class="button-an" @click="Lottery">
            {{ dialogButton }}
          </Button>
          <Button
            type="primary"
            size="small"
            v-if="dialogButton === '换个盒子继续'"
            @click="closed"
            class="button-an"
          >
            {{ dialogButton }}
          </Button>
          <Button
            type="primary"
            size="small"
            v-if="explain"
            @click="toSharePrize"
            class="edit-address button-an"
          >
            {{ dialogButton }}
          </Button>
          <!-- 这里是解释文案 -->
          <p class="explain" v-if="explain">{{explain}}</p>
          <!-- 这里是关闭按钮 -->
          <div class="my-after-solt" @click="closed"></div>
        </div>
      </div>
    </van-dialog>

    <!-- 这里是盲盒开启的动画 -->
    <div class="open-an" v-if="openAnVisible">
      <img src="../../assets/images/activity/blind-box-center.png" alt="" />
    </div>

    <!-- 这里是下面固定的按钮 -->
    <div class="bottom-btn">
      <div class="primary-btn shadow" @click="openBox"><span>10积木打开盲盒</span></div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import PrizePool from './PrizePool.vue';
  import GetIntegral from './GetIntegral.vue';
  import { Dialog, Button, Toast, NavBar, Icon } from 'vant';
  import mixins from 'mixins';
  import qs from 'qs';
  import share from '../../utils/share';
  // 解决ios没有滚动动画
  import smoothscroll from 'smoothscroll-polyfill';
  smoothscroll.polyfill();
  // Toast显示时间
  Toast.setDefaultOptions({ duration: 3000 });

  // 引入图片
  import defaultAvator from '../../assets/images/activity/default-avator.png';
  import emptyBox from '../../assets/images/activity/box-empty.png';

  export default {
    mixins: [mixins],
    components: {
      BottomOpenAppAdv,
      PrizePool,
      GetIntegral,
      // vant组件
      [Dialog.Component.name]: Dialog.Component,
      Button,
      'van-nav-bar': NavBar,
      // 'van-icon': Icon,
    },
    computed: {
      ...mapGetters(['$userInfo']),
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
    },
    created() {
      // 设置友盟参数
      this.ymParmas = this.query.uuid
        ? `mtjimu://webview?url=https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/activity/blindbox.html?uuid=${this.query.uuid}`
        : `mtjimu://webview?url=https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/activity/blindbox.html`
    },
    mounted() {
      // 设置标题
      this.$appService.setNav({
        title: '积幕盲盒',
        fullscreen: true,
      });

      // 微信分享
      wx.ready(() => {
        let temp = Math.floor(Math.random() * share.random.length);
        let _ = share.random[temp];
        if (this.$userInfo.uuid) {
          _.link = this.shareConfig.link + `?uuid=${this.$userInfo.uuid}`;
        }
        this.$setShareInfo({ ...this.shareConfig, ..._ });
      });

      // top获奖滚动列表
      this.getPrizeList();

      // 监听屏幕宽度
      window.onresize = () => {
        const _that = this;
        return (() => {
          window.screenWidth = document.body.clientWidth;
          _that.screenWidth = window.screenWidth;
        })();
      };

      const { address_id, jimu_rId, uuid } = this.query;
      this.uuid = uuid;
      // // 处理触发提交地址
      // if (address_id && jimu_rId && jimu_rId !== window.localStorage.getItem('jimu_rId')) {
      //   this.$service.SalesLotteryAddr({ addrId: address_id, rewardId: jimu_rId }).then((res) => {
      //     Toast('地址填写成功，我们会尽快为您发货！');
      //     window.localStorage.setItem('jimu_rId', jimu_rId);
      //   });
      // }

      // 刷新
      this.$EventBus.$on('jm:hybridActive', () => {
        // 刷新基本信息
        this.getUserInfo();
        // 处理邀请
        this.inviteFirend();
      });

      setTimeout(() => {
        // PV上报
        this.$MutongPv.pv({
          pt: 'jm',
          uuid: this.$userInfo.uuid || '',
        });
      }, 1000);

      // 开始top中奖列表的轮播
      this.message_box = document.querySelector('.message');
      this.message1 = document.querySelector('.message-1');
      this.message2 = document.querySelector('.message-2');

      this.startTopSwiper();
    },
    watch: {
      screenWidth: {
        handler(val) {
          if (val > 470) {
            this.$set(this.swiperOptions, 'width', 490);
            this.$set(this.swiperOptions, 'height', 454);
          } else {
            this.$set(this.swiperOptions, 'width', 245);
            this.$set(this.swiperOptions, 'height', 227);
          }
        },
        immediate: true,
      },
      //
      '$userInfo.nickname': {
        handler(val) {
          // 获取用户积分和开奖次数
          this.getJFCS();
          // 轮询用户任务积分
          this.getTaskGrade();
          // 处理邀请
          this.inviteFirend();
        },
      },
    },
    data() {
      // 记录this
      const that = this;
      return {
        // 友盟参数
        ymParmas:'',
        // 抽到的东西的信息
        rewordsData: {},
        // 默认图片
        defaultAvator: defaultAvator,
        // 盒子打开动画的显影
        openAnVisible: false,
        // 保存top获奖滚动列表
        topPrizeList: [],
        // 保存top获奖滚动列表
        fir_topPrizeList: [],
        // 保存top获奖滚动列表
        sub_topPrizeList: [],
        // 保存次数和积分
        jimuintegrate: {},
        // 任务积分
        taskData:{},
        // 是不是可以继续点了
        canFollow: true,
        // dialog显隐
        dialogVisible: false,
        // dialog的button的文案
        dialogButton: '',
        dialogTitle: '',
        dialogSubTitle: '',
        dialogContent: '',

        myIndex: 0,
        // 监听屏幕宽度
        screenWidth: document.body.clientWidth,
        // swiper配置
        swiperOptions: {
          slidesPerView: 1.2, //一屏展示多少个
          initialSlide: 15, //一开始展示第几个
          slidesOffsetBefore: 30, //离左边框的偏离
          on: {
            slideChangeTransitionEnd: function () {
              setTimeout(() => {
                that.myIndex = this.realIndex;
              }, 1000);
            },
          },
        },
        // 分享的配置
        shareConfig: {
          title: '神秘盲盒空降积幕',
          desc: '蓝牙耳机、GoPro运动相机、智能家居等N种好礼等你抽，总有一款适合你！',
          link: `https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/activity/blindbox.html`,
          imgUrl: 'https://mutong-ketang-img.oss-cn-shanghai.aliyuncs.com/res/blind-box.png',
        },

        // 如果没下载积幕就去下载
        goDownloadJM: `mtjimu://webview?url=${encodeURIComponent(window.location.href)}`,
        uuid: '',
        // 展示解释文案
        explain: '',
        // 环境
        env: process.env.NODE_ENV,
        // 子组件是否要刷新
        isRefresh: false,
        // 分享做成的图片
        // shareImg:'',
        // top轮播的元素
        messageIndex: 0,
        speed: 16, //数字越大速度越慢,
        message_box: '',
        message1: '',
        message2: '',
        MyTimer: null,
      };
    },
    methods: {
      // 领取积分
      getGrade(val, e) {
        if (this.$userInfo.nickname) {
          if(!this.canFollow) return;
          this.canFollow = false;
          let fs = this.taskData[val];
          // 请求成功之后开启动画
          let node = e.target;
          let newNode = document.createElement('span');
          let TextNode = document.createTextNode('+ ' + fs);
          newNode.appendChild(TextNode);
          newNode.style.position = 'absolute';
          newNode.style.top = '-2rem';
          newNode.style.left = '50%';
          newNode.style.transform = 'translate(-50%,0)';
          newNode.style.color = '#111';
          newNode.style.fontWeight = '500';
          node.appendChild(newNode);

          // 加动画
          setTimeout(() => {
            newNode.style.transition = 'all 2s';
            newNode.style.transform = 'translate(-50%,-15px)';
            newNode.style.opacity = '0';
          }, 10);
          // 这里是解决重复触发
          let flag = true;
          newNode &&
            newNode.addEventListener('transitionend', (e) => {
              if (flag) {
                node.removeChild(newNode);
                flag = false;
              }
            });
          setTimeout(() => {
            this.$service
              .SalesPointTake({ taskKey: val })
              .then((res) => {
                // 只有加了积分之后，才能继续点击加积分
                this.canFollow = true;
                // 刷新
                this.getTaskGrade();
                this.getJFCS()
                // 子组件刷新
                this.isRefresh = true;
              })
              .catch((err) => {
                Toast(err.message);
              });
          }, 1000);
        } else {
          this.login();
        }
      },

      // 分享的图片
      // getImg(img){
      //   this.shareImg = img
      // },

      // 分享抽到的奖品
      toSharePrize(){
        // type为1就是盲盒的分享
        this.rewordsData.type = 1
        // 分享链接
        this.rewordsData.shareUrl = `https://${
          process.env.NODE_ENV === 'development' ? 'dev-' : ''
        }jimu-h5.movtile.com/activity/blindbox.html${
          this.uuid ? '?uuid=' + this.uuid : ''
        }`;
        localStorage.setItem('shareImg',JSON.stringify(this.rewordsData))
        // 分情况，在app里面要用头部的话，得用openlink，不然回来会出现两个头部
        if (this.$UA.isJM) {
          setTimeout(()=>{
            this.$appService.openLink({
              link: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/activity/sharecard.html`,
            });
          },500)
        } else {
          setTimeout(()=>{
            window.location.href = new URL(`sharecard.html`, window.location.href);
          },500)
        }
        // this.$appService.share({image:this.shareImg})
      },
      
      // top轮播
      startTopSwiper() {
        if (this.MyTimer) {
          clearInterval(this.MyTimer);
        }
        this.MyTimer = setInterval(this.Marquee, this.speed);
      },
      Marquee() {
        if (this.message2.offsetWidth - this.message_box.scrollLeft <= 0) {
          this.message_box.scrollLeft -= this.message1.offsetWidth;
        } else {
          this.message_box.scrollLeft = this.message_box.scrollLeft + 1;
        }
      },

      // 触发邀请
      inviteFirend() {
        // 处理邀请
        if (this.uuid && this.$userInfo.nickname && this.uuid !== this.$userInfo.uuid) {
          this.$service.UserInviteAdd({ from: this.uuid }).then((res) => {});
        }
      },

      // 返回App
      toApp() {
        this.$appService.exit();
      },

      // 邀请好友
      shareFriend() {
        if(this.$userInfo.nickname){
          if(this.$UA.isJM){
            let temp = Math.floor(Math.random() * share.random.length);
            let _ = share.random[temp];
            if (this.$userInfo.uuid) {
              _.link = this.shareConfig.link + `?uuid=${this.$userInfo.uuid}`;
            }
            this.$appService.share({ ...this.shareConfig, ..._ });
          }else{
            Toast('点击右上角分享吧！')
          }
        }else{
          this.login()
        }
      },

      // 分享
      share() {
        let temp = Math.floor(Math.random() * share.random.length);
        let _ = share.random[temp];
        if (this.$userInfo.uuid) {
          _.link = this.shareConfig.link + `?uuid=${this.$userInfo.uuid}`;
        }
        this.$appService.share({ ...this.shareConfig, ..._ });
      },

      // 点击头像没有登录，就去登录
      toLogin() {
        if (this.$userInfo.nickname) {
        } else {
          this.login();
        }
      },

      // clearOpenId() {
      //   const currentQuery = qs.parse(window.location.search.substr(1));
      //   delete currentQuery['openId'];

      //   // 带商品id过去
      //   currentQuery.jimu_rId = this.rewordsData.id;

      //   const hrefWithoutOpenId = new URL(
      //     `blindbox.html?${qs.stringify(currentQuery)}`,
      //     window.location.href,
      //   ).toString();
      //   return hrefWithoutOpenId;
      // },

      // // 填写寄件地址
      // toAddress() {
      //   // 点填写地址的时候就把去掉localStorage
      //   window.localStorage.setItem('jimu_rId', '');

      //   // 跳转之后,去除openId参数
      //   const hrefWithoutOpenId = this.clearOpenId();

      //   const queryStr = qs.stringify({
      //     redirect: hrefWithoutOpenId,
      //     mode: 'select',
      //   });

      //   window.location.href = new URL(
      //     `https://${
      //       process.env.NODE_ENV === 'development' ? 'dev-' : ''
      //     }jimu-h5.movtile.com/mall/address.html?${queryStr}`,
      //     window.location.href,
      //   );
      // },
      // 去赚积木
      toGetJM() {
        let _ = document.querySelector('.header').clientHeight;
        window.scroll({ top: _ + 210, left: 0, behavior: 'smooth' });
      },
      // 轮询用户任务积分
      getTaskGrade() {
        if(!this.$userInfo.nickname) return
        this.$service.SalesPointRoll().then((res) => {
          this.taskData = res;
          // 每天进来20积分
          if (res.signin > 0) {
            this.dialogVisible = true;
            this.dialogButton = '';
            this.dialogTitle = '每日签到成功';
            this.dialogSubTitle = '积幕灵感派，盲盒你来开';
            this.$service.SalesPointTake({ taskKey: 'signin' }).then((res) => {
              // 刷新
              this.getJFCS();
              // 子组件刷新
              this.isRefresh = true;
            });
          }
        });
      },
      // 刷新积分
      refreshGrade() {
        this.getJFCS()
        this.getTaskGrade()
      },
      // 开盒子
      openBox() {
        if (this.$UA.isJM) {
          if (this.$userInfo.nickname) {
            this.dialogVisible = true;
            this.dialogButton = '开盲盒';
            this.dialogTitle = '10积木开启盲盒';
            this.dialogSubTitle = '爆款盲盒抽好礼';
          } else {
            this.login();
          }
        } else {
          // 弄一个假的节点，然后模拟点击
          let node = document.querySelector('.go-download-jm');
          node.click();
        }
      },
      // 关闭
      closed() {
        this.dialogVisible = false;
        this.explain = '';
        if (this.myIndex < 29) {
          this.swiper.slideNext(1500);
        } else {
          this.swiper.slideTo(0, 0);
          setTimeout(() => {
            this.swiper.slideNext(1500);
          }, 10);
        }
      },

      // 获取用户积分和开奖次数
      getJFCS() {
        if(!this.$userInfo.nickname) return
        this.$service.SalesUserStatus().then((res) => {
          this.jimuintegrate = res;
        });
      },

      // top获奖滚动列表
      getPrizeList() {
        this.$service.SalesLotteryTop({ size: 8 }).then((res) => {
          this.topPrizeList = res;
          this.fir_topPrizeList = this.topPrizeList;
          this.sub_topPrizeList = this.topPrizeList;
        });
      },

      // 开始抽奖
      Lottery() {
        // 积分少于10不给抽
        if (!this.jimuintegrate || this.jimuintegrate.point < 10) {
          Toast({ message: '积分不足，做任务领积分~~', position: 'top' });
          this.dialogVisible = false;
          this.toGetJM();
          return;
        }

        // 次数不足
        if (this.jimuintegrate.residueCount < 1) {
          Toast({ message: '今日开盲盒次数为0，明天再来', position: 'top' });
          this.dialogVisible = false;
          return;
        }

        this.dialogVisible = false;
        this.openAnVisible = true;
        // 这里先滞空
        this.dialogContent = '';
        setTimeout(() => {
          this.openAnVisible = false;
          // 这里发起请求,开始抽奖
          this.$service
            .SalesLotteryRoll()
            .then((res) => {
              this.rewordsData = res;
              // 有uuid就传下去
              if(this.$userInfo.uuid){
                this.rewordsData.uuid = this.$userInfo.uuid
              }
              // 播放完动画后出现中奖框
              this.dialogVisible = true;
              this.dialogContent = res.cover;
              // 中奖
              if (res.rewardState) {
                this.dialogButton = '开心收下';
                this.dialogTitle = '恭喜获得!';
                this.dialogSubTitle = '';

                // 中奖了刷新top列表
                this.getPrizeList();

                // 这个页面dialog支持填写发地址的补救方法,去填写地址的时候,
                // 在localStorage记录中奖的信息,填写好地址回来,刷新页面,
                // 判断localStorage有没有这个数据,有的话就打开弹窗,相应的数据赋值
                // 打开了之后记得立即把localStorage里面的数据立即清空,
                // 这样就可以实现产品想要的效果

                // 如果有地址,就去填写地址
                if (res.isAddr) {
                  this.dialogButton = '分享领取奖品';
                  this.explain = '请前往“我的盲盒”填写奖品邮寄地址\n并将分享截图私信发送至“积幕客服”';
                }

                if (res.rewardCode === 'vip_month') {
                  this.dialogButton = '分享领取奖品';
                  this.explain = 'VIP权益将自动生效\n可在有课VIP中心查看';
                }

                if (res.rewardCode === 'point') {
                  this.dialogButton = '立即分享获得更多中奖机会';
                }
              } else {
                this.dialogButton = '换个盒子继续';
                this.dialogTitle = '再接再厉！';
                this.dialogContent = emptyBox;
                this.dialogSubTitle = '不用灰心，你在为下次积赞运气呢～';
              }
              // 刷新
              this.getJFCS();
            })
            .catch((err) => {
              Toast(err.message);
            });
        }, 2000);
      },
      // 我的盲盒
      myBox() {
        if (this.$userInfo.nickname) {
          window.location.href = new URL(`mybox.html`, window.location.href);
        } else {
          this.login();
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .blind-box {
    width: 100%;
    min-height: 100vh;
    &::-webkit-scrollbar {
      background-color: transparent !important;
    }
    // 盒子点击动画
    @keyframes clickAn {
      0% {
        transform: translate(0rem, 0rem);
      }
      50% {
        transform: translate(1rem, 1rem);
      }
      100% {
        transform: translate(0rem, 0rem);
      }
    }

    // 打开盒子动画
    @keyframes openAn {
      0% {
        transform: rotate(0deg);
      }
      5% {
        transform: rotate(10deg);
      }
      10% {
        transform: rotate(0deg);
      }
      15% {
        transform: rotate(-10deg);
      }
      20% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(10deg);
      }
      30% {
        transform: rotate(0deg);
      }
      40% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(0deg);
      }
      60% {
        transform: rotate(0deg);
      }
      70% {
        transform: rotate(0deg);
      }
      75% {
        transform: rotate(-10deg);
      }
      80% {
        transform: rotate(0deg);
      }
      85% {
        transform: rotate(10deg);
      }
      90% {
        transform: rotate(0deg);
      }
      95% {
        transform: rotate(-10deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }

    // 按钮动画
    @keyframes buttonAn {
      0%{
        transform: scale(1,1);
      }
      50%{
        transform: scale(1.08,1.08);
      }
      100%{
        transform: scale(1,1);
      }
    }

    // 向右的分享按钮的动画
    @keyframes anShareRight {
      0%{
        transform: translateX(0px);
      }
      50%{
        transform: translateX(10px);
      }
      100%{
        transform: translateX(0px);
      }
    }

    // vant 样式修改
    /deep/ .van-nav-bar {
      .van-nav-bar__title {
        color: #111;
        font-weight: 600;
        font-size: 18px;
      }
      .van-nav-bar__arrow {
        font-size: 18px;
      }
      .van-nav-bar__right {
        img {
          width: 2.4rem;
          height: 2.4rem;
        }
      }
      .van-icon {
        color: #111;
      }
    }

    // navbar
    .my-nav-bar {
      height: 8.4rem;
      padding-top: 3.5rem;
    }

    // 顶部
    .header {
      position: relative;
      background: url('../../assets/images/activity/index.png') no-repeat;
      background-size: cover;
      width: 100vw;
      max-width: 750px;
      height: 127vw;
      max-height: 981px;
      overflow: hidden;
      // 在app里面去掉上面的
      &.app {
        margin-top: 6.5rem;
      }
      // 消息
      .message {
        display: flex;
        position: absolute;
        bottom: 0.2rem;
        margin: 2rem 0rem;
        width: 100%;
        height: 2.9rem;
        line-height: 2.9rem;
        white-space: nowrap;
        overflow: hidden;
        .inner-message {
          display: flex;
          .message-content {
            display: flex;
            align-items: center;
            margin-right: 2.3rem;
            border-radius: 2.9rem;
            font-size: 1.2rem;
            color: #48535c;
            background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
          }
          img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            margin-left: 0.2rem;
          }
          span {
            margin-left: 0.5rem;
          }
          .message-1 {
            display: flex;
          }
          .message-2 {
            display: flex;
          }
        }
      }
      .isLogin{
        bottom: 2.2rem !important;
      }

      // 用户信息
      .info {
        display: flex;
        align-items: center;
        margin: 3.1rem 0rem;
        .info-left {
          width: calc(100% - 10.4rem);
          display: flex;
          .info-item-left {
            display: flex;
            align-items: center;
            margin-left: 1rem;
            img {
              width: 3.4rem;
              height: 3.4rem;
              border-radius: 50%;
              background: linear-gradient(-45deg, #b0b0b0 0%, #e4e4e4 100%);
              border: 1px solid #fff;
            }
          }
          .info-item-right {
            margin-left: 0.7rem;
            font-size: 1.4rem;
            p {
              line-height: 1.3;
              font-weight: 500;
              color: #111111;
              span {
                position: relative;
                margin-left: 1.5rem;
              }
              .my-point {
                display: inline-block;
                padding-top: 2px;
              }
              .my-point::before {
                content: '';
                background: url(../../assets/images/activity/jimu.png) no-repeat;
                width: 1.1rem;
                height: 1.2rem;
                position: absolute;
                left: -1.5rem;
                top: 0.45rem;
                background-size: cover;
              }
              .my-button {
                font-size: 1.2rem;
                display: inline-block;
                font-weight: 400;
                width: 5.2rem;
                height: 2rem;
                line-height: 2rem;
                border-radius: 2rem;
                background-color: #00be8b;
                color: #fff;
                text-align: center;
                margin-left: 0.5rem;
                vertical-align: top;
              }
            }
          }
          // 没登录的情况下
          .notLogin {
            p {
              span {
                &:first-child::before {
                  content: none;
                }
              }
              .my-button {
                width: 7rem;
                margin-top: 0.7rem;
                margin-left: 0.1rem;
              }
            }
          }
        }
        .info-right {
          width: 10.4rem;
          height: 3.1rem;
          line-height: 3.1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 3.1rem 0 0 3.1rem;
          background-color: #ababab;
          color: #fff;
          font-size: 1.4rem;
          span {
            position: relative;
            margin-left: 3rem;
            &::before {
              content: '';
              background: url(../../assets/images/activity/my-blind-box.png) no-repeat;
              width: 1.8rem;
              height: 2.6rem;
              position: absolute;
              left: -2.5rem;
              top: 0.2rem;
              background-size: cover;
            }
          }
        }
      }

      // 这里是盲盒盒子
      .box {
        position: relative;
        display: flex;
        overflow-x: auto;
        margin-top: -0.5rem;
        height: 30rem;
        img {
          display: inline-block;
          width: 24.5rem;
          height: 22.7rem;
        }
        .shou {
          background: url(../../assets/images/activity/finger.png) center center no-repeat;
          background-size: cover;
          width: 11rem;
          height: 13rem;
          position: absolute;
          left: 23rem;
          top: 13rem;
          animation: clickAn 1.5s infinite normal linear;
          z-index: 9;
        }
      }

      // 领取邀请奖励
      .get-invite-prize{
        position: absolute;
        bottom: 6.2rem;
        right: 1rem;
        width: 26rem;
        height: 4.4rem;
        position: absolute;
        background: #00BE8B;
        border-radius: 21px;
        color: #fff;
        text-align: center;
        z-index: 29;
        p{
          &:first-child{
            font-size: 14px;
            font-weight: 500;
            margin-top: 0.3rem;
          }
          &:last-child{
            font-size: 10px;
            font-weight: 400;
            margin-top: 0.1rem;
          }
        }
      }
      .finished{
        line-height: 4.1rem;
        background: #FFB400;
        font-size: 1.4rem;
        box-shadow: 0px 4px 8px 0px rgba(255, 156, 0, 0.4);
      }

      // 这里是开盲盒机会
      .open-box-num {
        text-align: center;
        position: absolute;
        left: 1rem;
        bottom: 4.5rem;
        width: 7.5rem;
        height: 8rem;
        p {
          &:first-child {
            position: relative;
            font-size: 3.6rem;
            font-family: DIN;
            font-weight: bold;
            color: #00BE8B;
            -webkit-text-stroke: 2px #47535B;
            text-stroke: 2px #47535B;
            // text-shadow: #47535b 2px 0 0, #47535b 0 2px 0, #47535b -2px 0 0, #47535b 0 -2px 0;
            white-space: nowrap;
            span {
              display: inline-block;
              margin-left: -0.6rem;
              font-weight: 600;
              color: #48535C;
              font-size: 1.2rem;
              // text-shadow: #47535b 0px 0 0, #47535b 0 0px 0, #47535b 0px 0 0, #47535b 0 0px 0;
              -webkit-text-stroke: 0px #47535b;
            }
          }
          &:last-child {
            display: inline-block;
            width: 7.5rem;
            height: 1.8rem;
            line-height: 1.8rem;
            background: #48535c;
            border-radius: 0.9rem;
            color: #fefefe;
            font-size: 1rem;
            white-space: nowrap;
          }
        }
      }

      @media screen and (min-width: 470px) {
        .box {
          margin-top: 10rem;
          height: 40rem;
          img {
            width: 40rem;
            height: 35rem;
          }
          .shou {
            left: 36rem;
            top: 23rem;
          }
        }
      }
      @media screen and (min-width: 600px) {
        .box {
          margin-top: 20rem;
          height: 60rem;
          img {
            width: 49rem;
            height: 45.4rem;
          }
          .shou {
            width: 22.2rem;
            height: 26rem;
            left: 44rem;
            top: 27rem;
          }
        }
      }
    }
    // dialog样式改变
    .dialog-bg {
      background: url(../../assets/images/activity/floor-1.png) no-repeat top center;
      background-size: 100%;
      width: 25rem;
      top: 38%;
      max-height: 32.1rem;
      .dialog-content{
        text-align: center;
        .title {
          margin-top: 2rem;
          font-size: 1.8rem;
          color: #00be8b;
          font-weight: 600;
        }
        .subTitle {
          margin: 1rem 0rem 0rem;
          font-size: 1.4rem;
          color: #111;
        }
        .content {
          .jj-grade {
            display: flex;
            font-size: 1.8rem;
            font-weight: 600;
            justify-content: center;
            padding: 1.8rem 0rem;
            img {
              width: 2rem;
              height: 2.1rem;
            }
          }
          .zj{
            img{
              display: inline-block;
              margin: 1rem 0rem 0rem;
              width: 17.5rem;
              height: 17.5rem;
            }
            .prize-info{
              p{
                margin-top: 1rem;
                font-size: 16px;
                font-weight: 500;
                color: #000000;
              }
              .price{
                margin: 1rem 0rem 2rem;
                font-size: 14px;
                font-weight: 500;
                color: #FF9C00;
              }
            }
          }
        }
        .dialog-tool{
          position: absolute;
          top: calc(100%);
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          .van-button {
            background-color: #00be8b;
            box-shadow: 0rem 0.5rem 1rem 0rem rgba(0, 190, 139, 0.3);
            border-radius: 2rem;
            width: 22rem;
            height: 4rem;
            font-size: 1.6rem;
            font-weight: 500;
            margin-top: 2rem;
          }
          .button-an{
            animation: buttonAn 1.2s linear 0.5s normal infinite;
          }
          .my-after-solt {
            margin-top: 6rem;
            width: 3rem;
            height: 3rem;
            background: url(../../assets/images/activity/closed.png) no-repeat;
            background-size: cover;
          }
          .explain {
            width: 120%;
            margin-top: 2rem;
            font-size: 1.4rem;
            text-align: center;
            color: #fff;
          }
        }
      }
    }
    .van-dialog {
      overflow: visible !important;
      background-color: rgba(0, 0, 0, 0.8);
    }

    // 这里是打开盒子的动画
    .open-an {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      padding-top: 60%;
      img {
        display: block;
        width: 11rem;
        height: 15rem;
        animation: openAn 1s linear 0.5s normal 1;
        transform-origin: center center;
      }
    }

    // 这里是下面固定的按钮
    .bottom-btn {
      display: flex;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 2.5rem;
      justify-content: center;
      z-index: 10;
      padding: 0 2rem;
      justify-content: space-between;
      z-index: 30;
      .primary-btn {
        border-radius: 23px;
        color: #00E1AD;
        background: #48535C;
        span{
          background-image: linear-gradient(0deg, #00B584 0%, #71E9C8 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
</style>
<style lang="less">
  .van-toast {
    border-radius: 1.4rem;
    font-size: 1.4rem;
    color: #fff;
    padding: 9px 14px;
    box-sizing: border-box;
  }
  .van-toast--top {
    background: #00be8b;
    top: 33%;
  }
  .van-overlay {
    background-color: rgba(0, 0, 0, 0.8);
  }
</style>
